<template>
  <view class="stages-fee-list">
    <div class="stages-fee-item" v-for="(item, index) in handledFeeDetailList" :key="index">
      <div class="stages-fee-item-title">{{ item.feeName }}</div>
      <div class="stages-fee-item-sub-list">
        <div class="stages-fee-item-sub-item" v-for="(child, childIndex) in item.childrenList" :key="childIndex">
          <span class="fee-name">{{ child.itemName }}：</span>
          <span class="fee-amount">{{ child.amount }} 元</span>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    feeDetailList: {
      type: Array,
      default() {
        return []
      },
    },
  })
  const handledFeeDetailList = computed(() => {
    let detailList = props.feeDetailList
    let temp = [
      { feeCategory: 0, feeName: '基础费用', childrenList: [] },
      { feeCategory: 1, feeName: '增值服务费', childrenList: [] },
      { feeCategory: 2, feeName: '优惠费用', childrenList: [] },
      { feeCategory: 3, feeName: '其他费用', childrenList: [] },
    ]
    if (detailList && detailList.length > 0) {
      detailList.forEach((item) => {
        let feeCategory = item.feeCategory
        let targetIndex = temp.findIndex((tempItem) => tempItem.feeCategory == feeCategory)
        // 代表费用
        if (item.type == 1) {
          temp[targetIndex].childrenList.push(item)
        } else {
          // 代表目录
          temp[targetIndex].childrenList = item.childrenList
        }
      })
    }
    return temp.filter((item) => item.childrenList.length > 0)
  })
</script>
<style lang="less" scoped>
  .stages-fee-item {
    margin: 16px 0 0;
  }
  .stages-fee-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
    line-height: 22px;
    margin-bottom: 4px;
  }

  .stages-fee-item-sub-item {
    display: inline-block;
    margin-right: 56px;
    margin-bottom: 16px;
    .fee-name {
      color: #4e5969;
    }
    .fee-amount {
      color: #1d2129ff;
    }
  }
</style>
